<template>
  <div class="bg global_bg">
    <van-nav-bar title="发闲置" />
    <van-cell-group inset class="mt1">
      <van-cell>
        <van-field
          v-model="releaseGoodsObj.product_name"
          label="宝贝名称"
          placeholder="请输入宝贝名称"
        />
      </van-cell>
      <!-- 商品描述 -->
      <van-cell>
        <textarea
          :maxlength="300"
          cols="10rem"
          style="width: 95%; border: 0"
          rows="8"
          placeholder="描述一下宝贝的品牌型号，货品来源.."
          v-model="releaseGoodsObj.product_dsc"
        />
      </van-cell>
      <!-- 图片上传 -->
      <van-cell>
        <van-uploader
          v-model="fileList"
          multiple
          :max-count="1"
          :after-read="afterRead"
        />
      </van-cell>
    </van-cell-group>
    <van-cell-group inset class="mt1">
      <!-- 商品类别 -->
      <van-cell
        title="商品类别"
        is-link
        :value="getCategoryName"
        @click="showCategories = true"
      />
      <van-action-sheet
        v-model:show="showCategories"
        :actions="categoryActions"
        cancel-text="取消"
        close-on-click-action
        @cancel="onCancelCategories"
        @select="onSelectCategory"
      />
      <!-- 价格 -->
      <van-cell
        title="价格"
        is-link
        :value="'￥' + displayedValue"
        @touchstart.stop="showPriceKeyboard = true"
      />
      <van-number-keyboard
        :show="showPriceKeyboard"
        v-model="releaseGoodsObj.product_price"
        theme="custom"
        extra-key="."
        close-button-text="完成"
        @blur="showPriceKeyboard = false"
      />
      <!-- 发货方式 -->
      <van-cell
        title="发货方式"
        is-link
        :value="releaseGoodsObj.delivery_method"
        @click="showDeliveryMethods = true"
      />
      <van-action-sheet
        v-model:show="showDeliveryMethods"
        :actions="deliveryActions"
        cancel-text="取消"
        close-on-click-action
        @cancel="onCancelDelivery"
        @select="onSelectDelivery"
      />
    </van-cell-group>
    <div class="logn_btn fts1 tc" @click="goUpload">发布</div>
  </div>
</template>

<script>
import {
  NavBar,
  Cell,
  CellGroup,
  NumberKeyboard,
  Uploader,
  ActionSheet,
  Field,
  Toast,
  showToast,
  showSuccessToast,
} from 'vant'
import { ref, computed, watchEffect } from 'vue'
import releaseGoods from '@/api/releaseGoods.js'
import api from '@/api/api.js'

export default {
  components: {
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [NumberKeyboard.name]: NumberKeyboard,
    [Uploader.name]: Uploader,
    [ActionSheet.name]: ActionSheet,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [showToast.name]: showToast,
    [showSuccessToast.name]: showSuccessToast,
  },
  setup() {
    const showPriceKeyboard = ref(false)
    const showCategories = ref(false)
    const showDeliveryMethods = ref(false)
    const displayedValue = ref('0.00')
    const fileList = ref([])
    //商品类别选项
    const categoryActions = [
      { tage: 1, name: '手机' },
      { tage: 2, name: '奢侈品' },
      { tage: 3, name: '卡券' },
      { tage: 4, name: '潮玩' },
      { tage: 5, name: '游戏' },
      { tage: 6, name: '二手车' },
      { tage: 7, name: '电子产品' },
      { tage: 8, name: '大甩卖' },
    ]
    //发货方式选项
    const deliveryActions = [
      { name: '包邮' },
      { name: '自费邮寄' },
      { name: '自提' },
    ]

    const releaseGoodsObj = ref({
      product_name: '',
      product_dsc: '',
      product_imge: '',
      product_tage: 1,
      product_price: '',
      delivery_method: '',
      product_time: Math.floor(Date.now() / 1000), //当前时间戳
    })

    const getCategoryName = computed(() => {
      return (
        categoryActions.find(
          (item) => item.tage === releaseGoodsObj.value.product_tage
        )?.name || ''
      )
    })

    const onSelectCategory = (item) => {
      showCategories.value = false
      releaseGoodsObj.value.product_tage = item.tage
    }

    const onCancelCategories = () => {
      showCategories.value = false
    }

    const onSelectDelivery = (item) => {
      showDeliveryMethods.value = false
      releaseGoodsObj.value.delivery_method = item.name
    }

    const onCancelDelivery = () => {
      showDeliveryMethods.value = false
    }

    // 监听输入值的变化
    watchEffect(() => {
      displayedValue.value =
        releaseGoodsObj.value.product_price === ''
          ? '0.00'
          : releaseGoodsObj.value.product_price
    })

    const afterRead = (file) => {
      const formData = new FormData()
      formData.append('file', file.file)
      api
        .uploadImage(formData)
        .then((res) => {
          releaseGoodsObj.value.product_imge = res.filename
        })
        .catch((error) => {
          console.error('Error:', error)
          // 处理错误情况
        })
    }

    const goUpload = () => {
      if (
        !releaseGoodsObj.value.product_name &&
        !releaseGoodsObj.value.product_dsc &&
        !releaseGoodsObj.value.product_price
      ) {
        return showToast('请输入完整信息！')
      }
      releaseGoodsObj.value.product_imge =
        'user/' + releaseGoodsObj.value.product_imge
      releaseGoods.releaseGoods(releaseGoodsObj.value).then((res) => {
        if (res.status === 200) {
          releaseGoodsObj.value.product_name = ''
          releaseGoodsObj.value.product_dsc = ''
          releaseGoodsObj.value.product_price = ''
          showSuccessToast(res.msg)
        }
      })
    }

    return {
      showPriceKeyboard,
      showCategories,
      showDeliveryMethods,
      displayedValue,
      categoryActions,
      deliveryActions,
      onSelectCategory,
      onCancelCategories,
      onSelectDelivery,
      onCancelDelivery,
      releaseGoodsObj,
      getCategoryName,
      goUpload,
      afterRead,
      fileList,
    }
  },
}
</script>

<style scoped>
.upload_bg {
  padding: 0 0.345rem;
}
</style>
